<template>
  <div>
    <div style="float: left; color: #42b983; font-size: 16px; font-weight: 500">
      条件渲染
    </div>
    <template v-if="ok">
      <div>
        <div style="font-size: 24px">
          <a-button type="primary" @click="awesome = !awesome">Toggle</a-button>
          <h1 v-if="awesome">Vue is awesome!</h1>
          <h1 v-else>Oh no 😢</h1>
        </div>
        <div>
          <div v-if="type === 'A'">A</div>
          <div v-else-if="type === 'B'">B</div>
          <div v-else-if="type === 'C'">C</div>
          <div v-else>Not A/B/C</div>
        </div>
      </div>
      <div>
        <!-- 
        不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。
        v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用
        总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
        因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适 -->
        <h1 v-show="ok">show</h1>

        <!-- 同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显。请查看风格指南获得更多信息 -->
        <!-- 当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行 -->
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      awesome: false,
      type: "A",
      ok: true,
    };
  },
};
</script>

<style></style>
